<template>
  <div class="q-pa-md">
    <!-- 基础用法演示 -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-h6">基础用法</div>
        <div class="text-caption">展示基本的步骤条功能</div>
      </q-card-section>
      <q-card-section>
        <Steps :current="1">
          <StepItem
            v-for="(item, index) in steps"
            :key="index"
            :title="item.title"
            :description="item.desc"
          />
        </Steps>
      </q-card-section>
    </q-card>

    <!-- 垂直方向带卡片描述 -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-h6">垂直方向 + 卡片描述</div>
        <div class="text-caption">在描述中使用卡片展示更丰富的信息</div>
      </q-card-section>
      <q-card-section>
        <Steps direction="vertical" :current="2">
          <StepItem title="第一步">
            <template #description>
              <q-card class="my-card" flat bordered>
                <q-card-section>
                  <div class="text-h6">详细信息</div>
                  <div class="text-subtitle2">附加说明</div>
                </q-card-section>
                <q-card-section> 这里可以放置更多的详细内容说明 </q-card-section>
              </q-card>
            </template>
          </StepItem>
          <StepItem title="第二步" description="普通描述文本" />
          <StepItem title="第三步" description="普通描述文本" />
        </Steps>
      </q-card-section>
    </q-card>

    <!-- 自定义状态颜色 -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-h6">自定义状态颜色</div>
        <div class="text-caption">可以自定义每个状态的颜色</div>
      </q-card-section>
      <q-card-section>
        <Steps direction="vertical" :current="1">
          <StepItem
            title="第一步"
            description="已完成"
            processColor="#2196F3"
            finishColor="#4CAF50"
            errorColor="#F44336"
            waitColor="#9E9E9E"
          />
          <StepItem title="第二步" description="进行中" />
          <StepItem title="第三步" description="等待中" />
        </Steps>
      </q-card-section>
    </q-card>

    <!-- 自定义图标 -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-h6">自定义图标</div>
        <div class="text-caption">使用自定义图标替代默认数字</div>
      </q-card-section>
      <q-card-section>
        <Steps :current="1">
          <StepItem title="支付">
            <template #icon>💰</template>
          </StepItem>
          <StepItem title="发货">
            <template #icon>🚚</template>
          </StepItem>
          <StepItem title="收货">
            <template #icon>📦</template>
          </StepItem>
        </Steps>
      </q-card-section>
    </q-card>

    <!-- 错误状态 -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-h6">错误状态</div>
        <div class="text-caption">展示步骤执行出错的状态</div>
      </q-card-section>
      <q-card-section>
        <Steps :current="1" status="error">
          <StepItem title="第一步" />
          <StepItem title="第二步" description="验证失败" />
          <StepItem title="第三步" />
        </Steps>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import Steps from './common/FySteps/FyStep.vue'
import StepItem from './common/FySteps/FyStepItem.vue'
import { ref } from 'vue'
const steps = ref([
  {
    title: '第一步',
    desc: '简介',
  },
  {
    title: '第二步',
    desc: '简介',
  },
  {
    title: '第三步',
    desc: '简介',
  },
])
</script>

<style scoped></style>
